import React, { Component, useEffect, useRef } from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import { message } from 'antd';
import { request } from 'umi';
import './Gantt.css';
import { DictChildModalCom } from '@/pages/bigScreen/plan/widgets/gante';
import dayjs from 'dayjs';
import moment from 'moment';
import ExtensionDescription from '@/pages/plan/RoutineList/extensionDescription'; //延期说明页面
gantt.config.xml_date = '%Y-%m-%d'; // 日期格式化的匹配格式
gantt.config.scale_height = 90; // 日期栏的高度
gantt.config.grid_flex = false;
gantt.locale.labels.section_taskname = '任务名称';

const weekScaleTemplate = function (date) {
  const mouthMap = {
    Jan: '一月',
    Feb: '二月',
    Mar: '三月',
    Apr: '四月',
    May: '五月',
    Jun: '六月',
    Jul: '七月',
    Aug: '八月',
    Sep: '九月',
    Oct: '十月',
    Nov: '十一月',
    Dec: '十二月',
  };
  // 可以时使用dayjs 处理返回
  const dateToStr = gantt.date.date_to_str('%d');
  const mToStr = gantt.date.date_to_str('%M');
  const endDate = gantt.date.add(gantt.date.add(date, 1, 'week'), -1, 'day');
  // 处理一下月份
  let str = `${mouthMap[mToStr(date)]}`;
  return `${str}  ${dateToStr(date)} 号 - ${dateToStr(endDate)} 号 `;
};
const dayFormat = function (date) {
  const weeks = ['日', '一', '二', '三', '四', '五', '六'];
  return weeks[dayjs(date).day()];
  // return moment(date).format('DD');
};
gantt.config.scales = [
  { unit: 'year', step: 1, format: '%Y' },
  { unit: 'week', step: 1, format: weekScaleTemplate },
  { unit: 'day', step: 1, format: dayFormat },
];
window.gantt.config.readonly = true;
gantt.config.min_column_width = 40;
gantt.config.min_grid_column_width = 40;
gantt.config.row_height = 42;
gantt.config.grid_width = 600;
gantt.config.keep_grid_width = true;
// gantt.plugins({
//   marker: true,
// });
// gantt.addMarker({
//   start_date: new Date(),
//   text: '今日',
// });
gantt.attachEvent(
  'onTaskDblClick',
  function (id, e) {
    actionRef.current?.init(id);
    return false;
  },
  {},
);

gantt.config.columns = [
  {
    name: 'text',
    label: '工作名称',
    width: 150,
    align: 'left',
    task_class: 'aaaa222',
    template: function (task) {
      return '<div style="text-align:left">' + task.text + '</div>';
    },
  },
  {
    name: 'start_date',
    label: '开始日期',
    align: 'center',
    width: 100,
    template: function (task) {
      console.log(task);
      return (
        '<div>' +
        gantt.templates.date_grid(task.planStartTime) +
        '</div>' +
        '<div>' +
        (task.actualStartTime ? task.actualStartTime : '-- -- --') +
        '</div>'
      );
    },
  },
  {
    name: 'planEndTime',
    label: '结束日期',
    align: 'center',
    width: 100,
    template: function (task) {
      return (
        gantt.templates.date_grid(task.planEndTime) +
        '<br />' +
        (task.actualEndTime ? task.actualEndTime : '-- -- --')
      );
    },
  },
  {
    name: 'execDeptName',
    label: '执行部门',
    width: 120,
    template: function (task) {
      return '<div  style="text-align:left">' + (task.execDeptName || '') + '</div>';
    },
  },
  {
    name: 'execUserName',
    label: '执行负责人',
    width: 120,
    template: function (task) {
      return '<div  style="text-align:left">' + (task.execUserName || '') + '</div>';
    },
  },
  {
    name: 'finishStatus',
    label: '状态',
    align: 'center',
    width: 130,
    template: function (task) {
      let isNormal = window.location.hash.indexOf('cockpitPlan') != -1 ? false : true;
      // * 1. 正常完成
      // * 2. 延期，工作已经结束 （有时间结束时间，且结束时间晚于计划结束时间）
      // * 3. 工作进行中。 （有实际开始时间，且当前时间小于计划结束时间）
      // * 4. 任务未开始，也没有执行数据 （没有月度分解计划，也没有实际的时间）
      // * 5. 任务提前结束 （依据实际完成时间判断）
      // * 6. 任务终止或暂停 (判断 master主计划 或 package 工作包的 finish状态字段)
      // * 7. 工作进行中，延误 （有实际开始时间，且当前时间大于计划结束时间）
      // * 8. 工作进行中，延误（有实际开始时间，且实际开始时间 大于 计划结束时间）
      return `<div style="text-align: left">
      <span  class="workstatus gantt-task-status${task.finishStatus}"></span>
      ${
        [
          '',
          '正常完成',
          '延期完成',
          '工作进行中',
          '任务未开始',
          '提前结束',
          '终止',
          '进行中延误 ',
          '进行中延误',
        ][task.finishStatus]
      }
      ${
        ['2', '7', '8'].indexOf(task.finishStatus) != -1
          ? `<a ${isNormal ? '' : 'style="color: #6CECFC"'} href="javascript:window.ywinfo('${
              task.id
            }')">
        延误原因
      </a>`
          : ''
      }
      </div>`;
    },
  },
];
gantt.templates.task_class = function (start, end, task) {
  return 'gantt-task-status' + task.finishStatus;
};
let ganttContainer = null;
let GanttCom = null;
let actionRef = null;
let extensionRef = null;
const ywinfo = (id) => {
  extensionRef.current?.init(id);
};
window.ywinfo = ywinfo;
export default function Gantt(props) {
  actionRef = useRef();
  extensionRef = useRef();
  useEffect(() => {
    GanttCom = this;
    gantt.clearAll();
    gantt.config.date_format = '%Y-%m-%d %H:%i';
    const { tasks } = props;
    let enddate = 0;
    tasks.data.map((e) => {
      let itemendtime = new Date(e.end_date_str).getTime();
      if (itemendtime > enddate) {
        enddate = itemendtime;
      }
    });

    console.log('最大日期' + moment(enddate).format('YYYY-MM-DD'));
    let end = moment(enddate).add(14, 'days').format('YYYY-MM-DD');
    console.log(gantt.config.end_date);
    gantt.init(ganttContainer);

    // gantt.config.end_date = new Date(2023, 11, 11);

    gantt.parse(tasks);
    // const currentDate = new Date();
    // gantt.scrollTo(currentDate);
  }, []);

  return (
    <>
      <div
        ref={(input) => {
          ganttContainer = input;
        }}
        style={{ width: '100%', height: '100%' }}
      ></div>
      <DictChildModalCom ref={actionRef} callback={() => {}} />

      <ExtensionDescription ref={extensionRef} hideadd={true} callback={() => {}} />
    </>
  );
}
